<template>
  <main-card :title="pageTitle" :crumbs="crumbs" :loading="loadingShow" :screen-style-obj="{ marginTop: '20px' }">
    <template #screen-space>
      <div class="time-area flex screen-wrap mt--9">
        创建时间<span>{{ bucketObj.createTime }}</span>
      </div>
    </template>

    <template #default>
      <div class="main-body">
        <!-- 基本信息 -->
        <div class="basic-info">
          <div class="title">基本信息</div>
          <div class="content-main">
            <div class="content-item">
              <div class="label">数据集大小</div>
              <div class="value">{{ sizeFilter(bucketObj.size) }}</div>
            </div>
            <div class="content-item">
              <div class="label">文件数量</div>
              <div class="value">{{ bucketObj.fileNum }}</div>
            </div>
            <div class="content-item">
              <div class="label">数据集描述</div>
              <div class="value">{{ bucketObj.description }}</div>
            </div>
          </div>
        </div>

        <!-- 图表部分 -->
        <div class="chart-area">
          <!-- 分布饼图 -->
          <div class="pie-chart">
            <div class="title-box">
              <div class="title">格式分布</div>
              <div class="title">类型分布</div>
              <div class="title">大小分布</div>
            </div>
            <a-divider style="margin: 0" />
            <div class="pie-box">
              <div class="file-item">
                <!-- <div class="title">格式分布</div> -->
                <div id="formatPie" class="file-pie"></div>
              </div>
              <div class="file-item">
                <!-- <div class="title">类型分布</div> -->
                <div id="typePie" class="file-pie"></div>
              </div>
              <div class="file-item">
                <!-- <div class="title">大小分布</div> -->
                <div id="sizePie" class="file-pie"></div>
              </div>
            </div>
          </div>
          <!-- 趋势图 -->
          <div class="file-trend-part">
            <div class="file-trend-title fw-700">文件数量趋势</div>
            <div id="fileTrendCloud" class="file-trend-chart"></div>
          </div>
        </div>
      </div>
    </template>
  </main-card>
</template>

<script setup lang="ts">
  import * as echarts from 'echarts'
  import { sizeFilter } from 'g6-fn'
  import { computed, onMounted, onUnmounted, onUpdated, ref } from 'vue'
  import { useRoute } from 'vue-router'

  import MainCard, { Crumb } from '@/components/MainCard/index.vue'
  import { customerMyDateSetApi } from '@/services/api'

  import { RouteType } from '../types/my-data'

  // let bucketId = route.params.id as string
  const route = useRoute()
  const loadingShow = ref<boolean>(false)
  let routerParam = ref<RouteType>({
    name: '',
    pid: 0,
    description: 'asd'
  })
  // 获取id
  console.log('route.params:', route.query.name)

  routerParam.value.bucketId = route.params.id as string
  /*---------------------------------------- 面包削 --------------------------------------------- */
  const crumbs = ref<Crumb[]>([{ name: '数据管理', path: '/my-data-manage/list' }, { name: route.query.name as string }])
  const pageTitle = computed(() => `数据概览(${crumbs.value[crumbs.value.length - 1].name})`)
  // 整体数据
  const bucketObj = ref<any>({})
  // 格式分布
  let formatPieDom
  let formatPieChart: any
  const formatPieInit = (): void => {
    // This example requires ECharts v5.5.0 or later
    const option = {
      backgroundColor: '#fff',
      tooltip: {
        trigger: 'item'
      },
      grid: {
        top: '32px'
        // bottom: '50%'
      },

      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['58%', '96%'],

          center: ['50%', '50%'],

          // adjust the start and end angle
          tooltip: {
            borderWidth: 0,
            padding: [8, 12, 8, 12],
            fontSize: 12,
            formatter: function (params: any) {
              params.marker =
                '<div style="display:inline-block; width:10px; height:10px; border-radius:50%; background-color:' +
                params.color +
                '; margin-right:4px;"></div>' // var tooltipContent = params.marker+params.data.name+' '+params.data.value // params.forEach(function (item) { // console.log(item) // result += item.axisValue + "</br>" + item.marker + item.data // })
              let tooltipContent = params.marker
              tooltipContent += '<div style="display:inline-block;color: rgba(17, 22, 31, 0.75);margin-right:4px">' + params.name + '</div>' // 修改 name 的样式
              tooltipContent += '<div style="display:inline-block;color: rgba(21, 23, 27, 0.95);"> ' + params.value + '</div>' // 修改 value 的样式

              tooltipContent += '</div>' // 结束自定义样式
              return tooltipContent
            },
            extraCssText: 'box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);'
          },
          label: {
            show: false
          },
          data: bucketObj.value.statisticInfoVO.formatInfoList,
          color: [
            'rgba(255, 240, 139, 1)',
            'rgba(136, 226, 213, 1)',
            'rgba(252, 181, 140, 1)',
            'rgba(237, 132, 118, 1)',
            'rgba(248, 185, 84, 1)',
            'rgba(217, 228, 136, 1)',
            'rgba(232, 240, 253, 1)',
            'rgba(146, 219, 155, 1)',
            'rgba(190, 169, 226, 1)',
            'rgba(84, 189, 250, 1)'
          ]
        }
      ]
    }

    option && formatPieChart?.setOption(option)
    window.addEventListener('resize', () => {
      formatPieChart.resize()
    })
  }

  // 类型分布
  let typePieDom
  let typePieChart: any
  const typePieInit = (): void => {
    // This example requires ECharts v5.5.0 or later
    const option = {
      tooltip: {
        trigger: 'item'
      },

      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['58%', '96%'],

          center: ['50%', '50%'],

          // adjust the start and end angle
          tooltip: {
            borderWidth: 0,
            padding: [8, 12, 8, 12],
            fontSize: 12,
            formatter: function (params: any) {
              params.marker =
                '<div style="display:inline-block; width:10px; height:10px; border-radius:50%; background-color:' +
                params.color +
                '; margin-right:4px;"></div>' // var tooltipContent = params.marker+params.data.name+' '+params.data.value // params.forEach(function (item) { // console.log(item) // result += item.axisValue + "</br>" + item.marker + item.data // })
              let tooltipContent = params.marker
              tooltipContent += '<div style="display:inline-block;color: rgba(17, 22, 31, 0.75);margin-right:4px">' + params.name + '</div>' // 修改 name 的样式
              tooltipContent += '<div style="display:inline-block;color: rgba(21, 23, 27, 0.95);"> ' + params.value + '</div>' // 修改 value 的样式

              tooltipContent += '</div>' // 结束自定义样式
              return tooltipContent
            },
            extraCssText: 'box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);'
          },
          data: bucketObj.value.statisticInfoVO.typeInfoList,
          label: {
            show: false
          },
          color: [
            'rgba(255, 240, 139, 1)',
            'rgba(136, 226, 213, 1)',
            'rgba(252, 181, 140, 1)',
            'rgba(237, 132, 118, 1)',
            'rgba(248, 185, 84, 1)',
            'rgba(217, 228, 136, 1)',
            'rgba(232, 240, 253, 1)',
            'rgba(146, 219, 155, 1)',
            'rgba(190, 169, 226, 1)',
            'rgba(84, 189, 250, 1)'
          ]
        }
      ]
    }

    option && typePieChart?.setOption(option)
    window.addEventListener('resize', () => {
      typePieChart.resize()
    })
  }

  // 大小分布
  let sizePieDom
  let sizePieChart: any
  const sizePieInit = (): void => {
    // This example requires ECharts v5.5.0 or later
    const option = {
      tooltip: {
        trigger: 'item'
      },
      grid: {
        bottom: '1%'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['58%', '96%'],

          center: ['50%', '50%'],
          // adjust the start and end angle
          tooltip: {
            borderWidth: 0,
            padding: [8, 12, 8, 12],
            fontSize: 12,
            formatter: function (params: any) {
              params.marker =
                '<div style="display:inline-block; width:10px; height:10px; border-radius:50%; background-color:' +
                params.color +
                '; margin-right:4px;"></div>' // var tooltipContent = params.marker+params.data.name+' '+params.data.value // params.forEach(function (item) { // console.log(item) // result += item.axisValue + "</br>" + item.marker + item.data // })
              let tooltipContent = params.marker
              tooltipContent += '<div style="display:inline-block;color: rgba(17, 22, 31, 0.75);margin-right:4px">' + params.name + '</div>' // 修改 name 的样式
              tooltipContent += '<div style="display:inline-block;color: rgba(21, 23, 27, 0.95);"> ' + params.value + '</div>' // 修改 value 的样式

              tooltipContent += '</div>' // 结束自定义样式
              return tooltipContent
            },
            extraCssText: 'box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);'
          },
          data: bucketObj.value.statisticInfoVO.sizeRangeInfoList,
          label: {
            show: false
          },
          color: [
            'rgba(255, 240, 139, 1)',
            'rgba(136, 226, 213, 1)',
            'rgba(252, 181, 140, 1)',
            'rgba(237, 132, 118, 1)',
            'rgba(248, 185, 84, 1)',
            'rgba(217, 228, 136, 1)',
            'rgba(232, 240, 253, 1)',
            'rgba(146, 219, 155, 1)',
            'rgba(190, 169, 226, 1)',
            'rgba(84, 189, 250, 1)'
          ]
        }
      ]
    }

    option && sizePieChart?.setOption(option)
    window.addEventListener('resize', () => {
      sizePieChart.resize()
    })
  }

  // 文件数量趋势
  let fileTrendCloudDom
  let fileTrendCloudChart: any
  const fileTrendCloudInit = (): void => {
    const option = {
      tooltip: {
        trigger: 'axis', // 设置 tooltip 的触发方式为 axis
        // 使用 formatter 自定义 tooltip 的内容
        formatter: function (params: any) {
          let tooltipContent = '' // 用于存储自定义的 tooltip 内容
          tooltipContent += '<div style="text-align: left;width:124px">' // 自定义样式，可以根据需要修改

          // 循环遍历每个数据项，显示每个数据点的信息
          for (let i = 0; i < params.length; i++) {
            let seriesName = params[i].axisValue // 获取系列名称
            let value = params[i].value // 获取数据点的值

            tooltipContent += '<div style="font-size:12px;color: rgba(17, 22, 31, 0.75);margin-bottom:8px">' + seriesName + '</div>' // 显示系列名称

            // 判断当前数据点是否是被鼠标指的那条线上的数据点，如果是，则添加特殊的圆点标识
            if (params[i].seriesIndex === params[0].seriesIndex && params[i].dataIndex === params[0].dataIndex) {
              tooltipContent +=
                '<div style="margin-right: 5px; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: rgba(100, 154, 240, 1);"></div>' // 显示特殊的圆点标识
            } else {
              tooltipContent += '<div style="margin-right: 5px; display: inline-block;">●</div>' // 显示普通的圆点
            }

            tooltipContent +=
              '<div style="display:inline-block;font-size:12px">文件数量: ' +
              '<span style="font-size: 12px; color: rgba(21, 23, 27, 0.95); font-weight: 600">' +
              value +
              '</span>' +
              '</div>' // 显示数据点的值
          }

          tooltipContent += '</div>' // 结束自定义样式

          return tooltipContent // 返回自定义的 tooltip 内容
        },
        padding: [8, 12, 8, 12],
        extraCssText: 'box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);'
      },
      grid: {
        // top: '10%',
        bottom: '8%',
        left: '5%',
        width: '91%',
        height: '205px'
      },
      xAxis: {
        boundaryGap: false,
        type: 'category',
        data: bucketObj.value.fileNumTrendVO.fileNumTrendVOList.map((item: { name: string; value: number }) => item.name),
        axisLine: {
          show: false
        },
        axisLabel: {
          color: 'rgba(17, 22, 31, 0.52)',
          marginLeft: 20
        },
        axisTick: {
          // alignWithLabel: true, // 将刻度线与文字对齐
          length: 4, // 刻度线的长度
          lineStyle: {
            color: 'rgba(217, 218, 219, 1)'
          }
        }
      },
      yAxis: {
        type: 'value',
        splitNumber: 5,
        max: function (value: any) {
          return value.max
        },
        // interval: 250,
        axisTick: {
          show: false
        },
        axisLabel: {
          color: 'rgba(17, 22, 31, 0.52)'
        },
        splitLine: {
          show: false
        }
      },
      series: [
        {
          data: bucketObj.value.fileNumTrendVO.fileNumTrendVOList?.map((item: { name: string; value: number }) => item.value),

          type: 'line',
          lineStyle: {
            color: 'rgba(100, 154, 240, 1)',
            width: 2
          },
          legendHoverLink: false,
          symbol: 'circle', // 将符号设置为圆点
          symbolSize: 8, // 设置圆点大小
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(100, 154, 240, 0.40)'
              },
              {
                offset: 1,
                color: 'rgba(100, 154, 240, 0.10)'
              }
            ])
          },
          itemStyle: {
            normal: {
              opacity: 0 // 设置透明度为0，即隐藏圆点
            },
            // 设置被鼠标指的那条折线的样式
            emphasis: {
              borderColor: '#fff', // 指示圆点边框颜色
              opacity: 1,
              borderWidth: 2, // 指示圆点边框宽度
              color: 'rgba(100, 154, 240, 1)' // 指示圆点填充颜色
            }
          }
        }
      ]
    }

    option && fileTrendCloudChart?.setOption(option)
  }
  // 初始化
  const domInit = (): void => {
    formatPieDom = document.getElementById('formatPie')
    formatPieChart = echarts.init(formatPieDom)

    typePieDom = document.getElementById('typePie')
    typePieChart = echarts.init(typePieDom)

    sizePieDom = document.getElementById('sizePie')
    sizePieChart = echarts.init(sizePieDom)

    fileTrendCloudDom = document.getElementById('fileTrendCloud')
    fileTrendCloudChart = echarts.init(fileTrendCloudDom)
  }
  // 获取接口数据
  const getBoardInfo = async (): Promise<void> => {
    console.log('route:', route)

    const { data } = await customerMyDateSetApi.getOverview({ id: route.query.id })
    bucketObj.value = data
    console.log('getBoard:', bucketObj.value.fileNumTrendVO.fileNumTrendVOList)
  }
  onMounted(async () => {
    await getBoardInfo()
    domInit()
    formatPieInit()
    typePieInit()
    sizePieInit()
    fileTrendCloudInit()
  })

  // 销毁dom
  onUnmounted(() => {
    if (formatPieChart) formatPieChart.dispose()
    if (typePieChart) typePieChart.dispose()
    if (sizePieChart) sizePieChart.dispose()
    if (fileTrendCloudChart) fileTrendCloudChart.dispose()
  })

  // 更新dom
  onUpdated(() => {
    formatPieInit()
    typePieInit()
    sizePieInit()
    fileTrendCloudInit()
  })
</script>

<style lang="less" scoped>
  .time-area {
    align-items: center;
    padding: 8px 24px;
    width: 100%;
    height: 36px;
    font-size: 12px;
    color: @text03;
    background: @background5;
    border-radius: 6px;

    span {
      display: inline-block;
      margin-left: 16px;
      color: @text01;
    }
  }

  .main-body {
    display: flex;
    margin-top: 12px;

    .basic-info {
      padding: 16px 24px;
      margin-right: 24px;
      width: 400px;
      height: 651px;
      background: @background1;
      border: 1px solid @border1;
      border-radius: 10px;

      .title {
        padding-bottom: 12px;
        margin-bottom: 24px;
        font-size: 14px;
        color: @text01;
        font-weight: 700;
        line-height: 22px;
        border-bottom: 1px solid @border1;
      }

      .content-main {
        .content-item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 16px;
          font-size: 14px;
          line-height: 22px;

          .label {
            width: 120px;
            color: @text02;
          }

          .value {
            width: 216px;
            color: @text01;
          }
        }
      }
    }

    .chart-area {
      display: flex;
      flex-direction: column;
      width: 100%;

      .pie-chart {
        padding: 32px;
        margin-bottom: 24px;
        width: 100%;
        height: 313px;
        background: #fff;
        border: 1px solid @border1;
        border-radius: 10px;

        .title-box {
          display: flex;
          flex: 1;
          justify-content: space-between;

          .title {
            display: flex;
            align-items: center;
            padding-bottom: 12px;
            width: 178px;
            height: 36px;
            font-size: 16px;
            // border-bottom: 1px solid #e8e8eb;
            font-weight: 700;
          }
        }

        .pie-box {
          display: flex;
          justify-content: space-between;
          flex: 1;
          // align-items: center;

          .file-item {
            // margin-right: 177px;
            // width: 100%;

            .file-pie {
              margin-top: 32px;
              width: 177px;
              height: 177.999px;
            }
          }
        }
      }

      .file-trend-part {
        padding: 16px 24px;
        width: 100%;
        height: calc(100% - 24px);
        background: @background1;
        border: 1px solid @border1;
        flex: 1;
        border-radius: 10px;

        .file-trend-title {
          font-size: 16px;
          color: @text01;
        }

        .file-trend-chart {
          width: 100%;
          height: calc(100% - 24px);
        }
      }
    }
  }
</style>
